import React, { useEffect, useState } from 'react'
import './putStore.css'
import { Button, Form, Input } from 'antd'
import { editMaterial } from '../../api/api'
import { render } from 'react-dom'

const PutForm = (props, ref) => {
  console.log('11111', props)
  const [form] = Form.useForm()
  useEffect(() => {
    form.setFieldsValue(props.item)
    console.log('执行===')
  }, [props.item.id])
  const onFinish = (values) => {
    console.log('Success:', values)
    editMaterial({ ...values, id: props.item.id }).then((res) => {
      console.log('编辑原料', res, props)
      if (res.code == 200) {
        props.editFinish()
      }
    })
  }
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }
  // 名称
  const [name, setName] = useState(props.item.name)
  const handleName = (val) => {
    setName(val.target.value)
  }
  //数量
  const [number, setNumber] = useState(props.item.number)
  const handleNumber = (val) => {
    setNumber(val.target.value)
  }
  //备注
  const [memo, setMemo] = useState(props.item.memo)
  const handleMemo = (val) => {
    setMemo(val.target.value)
  }
  return (
    <div>
      <Form
        name="basic"
        form={form}
        labelCol={{
          span: 3,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          marginTop: 30,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off">
        <Form.Item label="原料名称" name="name">
          <div className="iptbox2 align-center">
            <Input
              value={name}
              onChange={handleName}
              placeholder="请输入原料名称"
            />
          </div>
        </Form.Item>

        <Form.Item label="原料数量" name="number">
          <div className="iptbox2 align-center">
            <Input
              value={number}
              onChange={handleNumber}
              placeholder="请输入原料数量"
            />
          </div>
        </Form.Item>
        <Form.Item
          label="备注说明"
          name="memo"
          wrapperCol={{
            span: 16,
          }}>
          <div className="iptbox2 align-center">
            <Input.TextArea
              value={memo}
              onChange={handleMemo}
              rows={6}
              placeholder="请输入备注说明"
            />
          </div>
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 3,
            span: 16,
          }}>
          <Button htmlType="submit" className="submitbtn">
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default PutForm
